<script setup>
import Component_19 from '@/assets/img/Component_19.png'
import bg from '@/assets/img/title2_2.png'

const props = defineProps({
  title: {
    type: String,
    default: '默认标题'
  },
  img: {
    type: String,
    default: Component_19
  }
})
</script>

<template>
  <div class="relative h-44 w-full second-level-card-title-bg flex  items-center flex-shrink-0">

    <div class="m-l-10 z-99">
      <img :src="props.img" alt="Component_19" class="w-22 h-22" />
    </div>
    <div class="flex justify-between items-center w-full m-r-10">
      <div class="second-level-card-title m-l-18 z-99">{{ props.title }}</div>
      <div class="z-99 h-26">
        <slot name="right"></slot>
      </div>
    </div>

    <img :src="bg" alt="" class="absolute top-0 left-0 w-full h-full z-1" />
  </div>
</template>

<style scoped>
.second-level-card-title {
  background: linear-gradient(90deg, #ffffff, #60cbac);
  -webkit-background-clip: text; /* 将背景剪裁至文本 */
  -webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */
  display: inline-block; /* 确保背景仅覆盖文本区域 */
  transform: skewX(-10deg); /* 向右倾斜 10 度 */
  font-size: 20px;
  font-family: 'AliSemiBold';
}
</style>
